<template>
    <view class="container">
        <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
        
        <view class="nav-bar">
            <view class="back-btn" @click="goBack">
                <image src="/static/return.png" mode="aspectFit" class="back-icon"/>
            </view>
            <text class="nav-title">单词测试</text>
            <text class="progress">{{ currentIndex + 1 }}/{{ questions.length }}</text>
        </view>

        <view class="question-card" v-if="currentQuestion">
            <view class="word-title-container">
                <text class="word-title">{{ currentQuestion.word_name }}</text>
                <view class="collect-btn" @click="showWordbookList">
                    <image src="/static/collect.jpg" mode="aspectFit" class="collect-icon"/>
                </view>
            </view>
            
            <view class="options-list">
                <view 
                    class="option-item" 
                    v-for="(option, index) in currentQuestion.options" 
                    :key="index"
                    :class="{
                        'selected': selectedOption === index,
                        'correct': showAnswer && index === currentQuestion.correct_option - 1,
                        'wrong': showAnswer && selectedOption === index && index !== currentQuestion.correct_option - 1
                    }"
                    @click="selectOption(index)"
                >
                    <text class="option-index">{{ ['A', 'B', 'C', 'D'][index] }}</text>
                    <text class="option-text">{{ option }}</text>
                </view>
            </view>
        </view>

        <view class="button-group">
            <button 
                class="submit-btn" 
                :disabled="selectedOption === null"
                @click="handleSubmit"
            >
                {{ showAnswer ? '下一题' : '提交' }}
            </button>
        </view>

        <view class="wordbook-popup" v-if="showPopup">
            <view class="popup-mask" @click="hideWordbookList"></view>
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">选择单词本</text>
                    <view class="close-btn" @click="hideWordbookList">×</view>
                </view>
                <view class="wordbook-list">
                    <view 
                        class="wordbook-item" 
                        v-for="book in wordbooks" 
                        :key="book.wordbook_id"
                        @click="collectWord(book.wordbook_id)"
                    >
                        <text class="wordbook-name">{{ book.wordbook_name }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { user_wordbooks, add_word_to_wordbook } from '@/api/user.js'

export default {
    data() {
        return {
            questions: [],
            currentIndex: 0,
            selectedOption: null,
            showAnswer: false,
            score: 0,
            wordbooks: [],
            showPopup: false
        }
    },
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex]
        }
    },
    onLoad() {
        const questions = uni.getStorageSync('testQuestions')
        if (questions) {
            this.questions = questions
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        selectOption(index) {
            if (!this.showAnswer) {
                this.selectedOption = index
            }
        },
        handleSubmit() {
            if (this.showAnswer) {
                // 进入下一题
                this.nextQuestion()
            } else {
                // 显示答案
                this.checkAnswer()
            }
        },
        checkAnswer() {
            this.showAnswer = true
            if (this.selectedOption === this.currentQuestion.correct_option - 1) {
                this.score++
            }
        },
        nextQuestion() {
            if (this.currentIndex < this.questions.length - 1) {
                this.currentIndex++
                this.selectedOption = null
                this.showAnswer = false
            } else {
                // 测试完成，显示得分
                uni.showModal({
                    title: '测试完成',
                    content: `得分：${this.score}/${this.questions.length}`,
                    showCancel: false,
                    success: () => {
                        uni.navigateBack()
                    }
                })
            }
        },
        async showWordbookList() {
            try {
                const userId = uni.getStorageSync('user_id')
                console.log('获取到的用户ID:', userId)
                
                if (!userId) {
                    console.warn('未获取到用户ID')
                    uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    })
                    return
                }

                const res = await user_wordbooks({
                    user_id: String(userId)
                })
                
                console.log('获取单词本响应：', res)
                if (res.code === '2000') {
                    this.wordbooks = res.data
                    this.showPopup = true
                } else {
                    uni.showToast({
                        title: res.message || '获取单词本失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('获取单词本失败：', error)
                uni.showToast({
                    title: '获取单词本失败',
                    icon: 'none'
                })
            }
        },
        hideWordbookList() {
            this.showPopup = false
        },
        async collectWord(wordbookId) {
            try {
                const userId = uni.getStorageSync('user_id')
                if (!userId || !this.currentQuestion.word_id || !wordbookId) {
                    uni.showToast({
                        title: '参数不完整',
                        icon: 'none'
                    })
                    return
                }

                const res = await add_word_to_wordbook({
                    user_id: String(userId),
                    word_id: String(this.currentQuestion.word_id),
                    wordbook_id: String(wordbookId)
                })

                if (res.code === '2000') {
                    uni.showToast({
                        title: '收藏成功',
                        icon: 'success'
                    })
                    this.hideWordbookList()
                } else {
                    uni.showToast({
                        title: res.message || '收藏失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                console.error('收藏单词失败:', error)
                uni.showToast({
                    title: '收藏失败，请重试',
                    icon: 'none'
                })
            }
        }
    }
}
</script>

<style>
.container {
    min-height: 100vh;
    position: relative;
}

.bg-image {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.nav-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 40px 20px 20px;
}

.back-icon {
    width: 24px;
    height: 24px;
}

.nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #333;
}

.progress {
    font-size: 14px;
    color: #666;
}

.question-card {
    position: relative;
    z-index: 2;
    margin: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
}

.word-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10px;
}

.word-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.collect-btn {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collect-icon {
    width: 24px;
    height: 24px;
}

.options-list {
    margin-top: 10px;
}

.option-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

.option-index {
    width: 30px;
    color: #666;
}

.option-text {
    flex: 1;
    color: #333;
}

.selected {
    background: rgba(107, 75, 138, 0.3);
    border: 1px solid rgba(107, 75, 138, 0.5);
}

.correct {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.wrong {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.5);
}

.button-group {
    position: fixed;
    bottom: 40px;
    left: 20px;
    right: 20px;
    z-index: 2;
}

.submit-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: rgba(107, 75, 138, 0.9);
    color: white;
    border-radius: 22px;
    font-size: 16px;
    backdrop-filter: blur(5px);
}

.submit-btn[disabled] {
    opacity: 0.5;
    background: rgba(107, 75, 138, 0.5);
}

.wordbook-popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
}

.popup-mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 16px 16px 0 0;
    padding: 20px;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.popup-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.close-btn {
    font-size: 24px;
    color: #999;
    padding: 5px;
}

.wordbook-list {
    max-height: 400px;
    overflow-y: auto;
}

.wordbook-item {
    padding: 15px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.3);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.wordbook-name {
    font-size: 16px;
    color: #333;
}
</style> 